<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="Shortcut Icon" href="./photo/22.jpg" type="image/x-icon" />
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link rel="stylesheet" href="musicfont/iconfont.css">
    <link rel="stylesheet" href="wyyicon/iconfont.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/lightbox-plus-jquery.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/template-web.js"></script>

</head>

<body>
    <!-- 歌曲音频   https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687 -->
    <!-- 
    根据歌曲id 异步查询 歌曲的详情音频URL
    https://autumnfish.cn/song/url

    根据歌曲id 异步查询 歌曲的详情评论
    https://autumnfish.cn/comment/music

    根据歌曲id异步查询 歌曲的中间的图片
    https://autumnfish.cn/song/detail 
    
    歌曲列表
    https://autumnfish.cn/search
    -->
    <!-- 箭头 -->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
    <!-- 开关 -->
    <label>
        <input type="checkbox">
        <span class="check"></span>
    </label>
    <!-- 上下一曲 -->
    <div class="songs">
        <h2 id="song-name" style="color: #fff;font-weight: 600;">兄妹</h2>
        <div class="controls">
            <audio id="audio" src=""></audio>
            <img id="backward" class="media-btn" src="./images/backward-button.png">
            <img id="play-stop" class="media-btn">
            <img id="forward" class="media-btn" src="./images/fast-forward.png">
        </div>
    </div>
    <!-- 头部tab栏 -->
    <ul class="tab" id="tab">
        <li><a href="./photo/1.jpg" data-lightbox="mygallery" data-title="东软湖边的日出,点击左侧上一页,右侧下一页,点击图片外退出观看"><img
                    src="./photo/1.jpg" alt=""></a></li>
        <li><a href="./photo/2.jpg" data-lightbox="mygallery" data-title="体育馆旁边的小树林"><img src="./photo/2.jpg"
                    alt=""></a></li>
        <li><a href="./photo/3.jpg" data-lightbox="mygallery" data-title="教学楼的日出"><img src="./photo/3.jpg" alt=""></a>
        </li>
        <li><a href="./photo/4.jpg" data-lightbox="mygallery" data-title="湖边的晚霞"><img src="./photo/4.jpg" alt=""></a>
        </li>
        <li><a href="./photo/5.jpg" data-lightbox="mygallery" data-title="星光大道"><img src="./photo/5.jpg" alt=""></a>
        </li>
        <li><a href="./photo/6.jpg" data-lightbox="mygallery" data-title="模糊的足球场"><img src="./photo/6.jpg" alt=""></a>
        </li>
        <li><a href="./photo/7.jpg" data-lightbox="mygallery" data-title="那个大湖,风景还可以,就是以前体育课老是掉球下去"><img
                    src="./photo/7.jpg" alt=""></a></li>
        <li><a href="./photo/8.jpg" data-lightbox="mygallery" data-title="东软的天空静悄悄"><img src="./photo/8.jpg" alt=""></a>
        </li>
        <li><a href="./photo/9.jpg" data-lightbox="mygallery" data-title="雨后的东软,忘记带伞了。。"><img src="./photo/9.jpg"
                    alt=""></a></li>
        <li><a href="./photo/10.jpg" data-lightbox="mygallery" data-title="东软小镇的宿舍"><img src="./photo/10.jpg"
                    alt=""></a></li>
        <li><a href="./photo/11.jpg" data-lightbox="mygallery" data-title="又是东软小镇的宿舍"><img src="./photo/11.jpg"
                    alt=""></a></li>
        <li><a href="./photo/12.jpg" data-lightbox="mygallery" data-title="B栋拍的湖边天空"><img src="./photo/12.jpg"
                    alt=""></a></li>
        <li><a href="./photo/13.jpg" data-lightbox="mygallery" data-title="大一上课必经之路,F栋楼"><img src="./photo/13.jpg"
                    alt=""></a></li>
        <li><a href="./photo/14.jpg" data-lightbox="mygallery" data-title="C栋门外的树"><img src="./photo/14.jpg" alt=""></a>
        </li>
        <li><a href="./photo/15.jpg" data-lightbox="mygallery" data-title="军训好晒啊,不过没想到那时候居然是我大学最好玩的时光"><img
                    src="./photo/15.jpg" alt=""></a></li>
        <li><a href="./photo/16.jpg" data-lightbox="mygallery" data-title="C栋门外的足球场"><img src="./photo/16.jpg"
                    alt=""></a></li>
        <li><a href="./photo/17.jpg" data-lightbox="mygallery" data-title="学二饭堂到图书馆那条路侧边的楼梯"><img src="./photo/17.jpg"
                    alt=""></a></li>
        <li><a href="./photo/18.jpg" data-lightbox="mygallery" data-title="不知道为什么别人都喜欢拍东软湖边的天空"><img
                    src="./photo/18.jpg" alt=""></a></li>
        <li><a href="./photo/19.jpg" data-lightbox="mygallery" data-title="作者信息"><img src="./photo/19.jpg" alt=""></a>
        </li>
        <li><a href="./photo/20.jpg" data-lightbox="mygallery" data-title="AB晚上的天空"><img src="./photo/20.jpg"
                    alt=""></a></li>
    </ul>

    <!-- 框框 -->
    <div class="container" style="display: none;">
        <div class="fisrstnav">
            <ul>
                <li class="active"><a href="index1.html" target="myFrame">哈哈1</a></li>
                <li><a href="index2.html" target="myFrame">哈哈2</a></li>
                <li><a href="index3.html" target="myFrame">哈哈3</a></li>
                <li><a href="index4.html" target="myFrame">哈哈4</a></li>
                <li><a href="index5.html" target="myFrame">哈哈5</a></li>
                <li><a href="index6.html" target="myFrame">哈哈6</a></li>
                <li><a href="index7.html" target="myFrame">哈哈7</a></li>
                <li><a href="index8.html" target="myFrame">哈哈8</a></li>
                <li><a href="index9.html" target="myFrame">哈哈9</a></li>
                <li><a href="index10.html" target="myFrame">开始BB</a></li>
            </ul>
        </div>
        <iframe class="iframe" src="./index1.html" frameborder="0" name='myFrame'></iframe>

    </div>
    
    <div class="content">

        <!-- 音乐播放 -->
        <div class="controller">
            <div id="circle-bg" class="circle">
                <div id="circle-sm" class="circle2"><img id="cover" src="" class="fluid-img"></div>
            </div>
    
        </div>
        <!-- 大黑云音乐盒子 -->
        <div class="blackcloud" style="display: none;">
            <!-- 顶部搜索控件 -->
            <div class="musictop">
                <div class="search-btn"></div>
                <div class="search">
                    <form action="">
                        <div class="jd-icon" id="search"></div>
                        <input id="content" type="search" placeholder="请输入歌曲或歌手">
                    </form>
                </div>
                <div class="close-btn" id="close"></div>
            </div>
            <!-- 中间内容组件 -->
            <div class="musicmid">
                <div class="home" style="display: none;">
                    <!-- 首页轮播图 -->
                    <div id="slider" class="focus">
                        <!-- 核心的滚动区域 -->
                        <ul id="photoslider">
                            <li>
                                <a href="#"><img
                                        src="http://p1.music.126.net/uZgf0GY54EeAcXy2Euanzg==/109951166098726016.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img
                                        src="http://p1.music.126.net/DoPXvLzDBPmfLO0JzVLWtg==/109951166092019335.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img
                                        src="http://p1.music.126.net/cfBlMI09TZ_6E01DqqISEA==/109951166098517615.jpg"
                                        alt=""></a>
                            </li>

                            <script id="photolist" type="text/html">
                                {{ each data.banners v }}
                                <li>
                                    <a href="#"><img src=" {{v.imageUrl}} " alt=""></a>
                                </li>
                                {{ /each }}
                            </script>
                        </ul>
                        <!--箭头-->
                        <div class="musicarrow">
                            <span id="left" class="left">&lt;</span>
                            <span id="right" class="right">&gt;</span>
                        </div>
                    </div>
                    <!-- 首页5个小图标 -->
                    <div class="iconlist">
                        <div class="iconul">
                            <ul>
                                <li>
                                    <span>
                                        <i id="wyfont" class="iconfont"> &#xe60c;
                                        </i>
                                    </span>
                                    <h6>私人FM</h6>
                                </li>
                                <li>
                                    <span>
                                        <i id="wyfont" class="iconfont"> &#xe61b;
                                        </i>
                                    </span>
                                    <h6>歌单</h6>
                                </li>
                                <li>
                                    <span>
                                        <i id="wyfont" class="iconfont"> &#xe6c5;
                                        </i>
                                    </span>
                                    <h6>排行榜</h6>
                                </li>
                                <li>
                                    <span>
                                        <i id="wyfont" class="iconfont"> &#xe626;
                                        </i>
                                    </span>
                                    <h6>直播</h6>
                                </li>
                                <li>
                                    <span>
                                        <i id="wyfont" class="iconfont"> &#xe600;
                                        </i>
                                    </span>
                                    <h6>K歌</h6>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 推荐歌单 -->
                    <div class="recommsong">
                        <div class="recomhead">
                            <span>推荐歌单</span>
                            <input type="button" value="更多>">
                        </div>
                        <div class="recommitem">
                            <ul>
                                
                                <li>
                                    <!-- 钉在图片的右上角 -->
                                    <div class="plays"> <i class="iconfont">&#xe601;</i></div>
                                    <!-- <div class="righttop">
                                        <i id="righttop" class="iconfont"> &#xe601;
                                        </i>
                                        123
                                    </div> -->

                                    <a href="">
                                        <img src="./images/gufeng.jpg"
                                            alt="">
                                    </a>
                                    <span class="introduce">国风BGM｜再听已是曲中人</span>
                                </li>
                                <li>
                                    <!-- 钉在图片的右上角 -->
                                    <div class="plays"> <i style="font-size: 5px;" class="iconfont">&#xe688;</i>999万</div>
                                    <a href="">
                                        <img src="./images/piano (1).jpg"
                                            alt="">
                                    </a>
                                    <span class="introduce">清新悦耳 · 流行钢琴曲收集</span>
                                </li>
                                <li>
                                    <!-- 钉在图片的右上角 -->
                                    <div class="plays"> <i style="font-size: 5px;" class="iconfont">&#xe688;</i>99万</div>
                                    <a href="">
                                        <img src="./images/eason.jpg"
                                            alt="">
                                    </a>
                                    <span class="introduce">陈奕迅肥陈Eason好好听</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 刷新一波大框框 -->
                    <div class="videolist">
                        <div class="videocon">
                            <!-- 视频的头部 -->
                            <div class="videohead">
                                <div class="lefthead"><i style="font-size: 20px;" class="iconfont"> &#xe616; </i>
                                    <span>推荐歌单</span>
                                </div>
                                <!-- <span><i style="font-size: 20px;" class="iconfont"> &#xe616; </i> 推荐歌单</span> -->
                                <div class="plays"> <i class="iconfont">&#xe688;</i>播放</div>
                            </div>
                            <!-- 列表 -->
                            <div class="videolist">
                                <!-- 第一首列表歌  -->
                                <div class="videosong play" id="vs1"  mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%9B%9B%E5%AD%A3%E4%BA%88%E4%BD%A0%20-%20%E7%A8%8B%E5%93%8D.mp3?sign=95f968ee4e82fdfc5ff33f5a99bc405c&t=1621685721">
                                    <div class="videophoto"  style="background: url(./images/fourseason.jpg);background-size: cover;">
                                        <!-- <img class="leftphoto" src="http://p1.music.126.net/cfBlMI09TZ_6E01DqqISEA==/109951166098517615.jpg" alt=""> -->
                                        <span class="videospan" style="z-index: 5;">
                                            <i class="iconfont"> &#xe60f;
                                            </i>
                                        </span>
                                    </div>
                                    <div class="videodetail">
                                        <div class="singer">四季予你 <i>-</i> <span>程响</span> </div>
                                        <input type="button" value="超过76%人播放">
                                    </div>
                                </div>
                                <!-- 第二首列表歌 -->
                                <div class="videosong play" id="vs2" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687">
                                    <div class="videophoto" style="background: url(./images/dtkq.jpg);background-size: cover;" >
                                        <!-- <img class="leftphoto" src="http://p1.music.126.net/cfBlMI09TZ_6E01DqqISEA==/109951166098517615.jpg" alt=""> -->
                                        <span class="videospan">
                                            <i class="iconfont"> &#xe60f;
                                            </i>
                                        </span>
                                    </div>
                                    <!-- 兄妹url  http://m701.music.126.net/20210619171440/e6cecede7225e9f2938c4c32cd5a1a95/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/8831004380/502c/34b8/c497/ac1cfda8fa7e63a2d43fe9a60ba0e535.mp3 -->
                                    <div class="videodetail">
                                        <div class="singer">兄妹 <i>-</i> <span>方大同/薛凯琪</span> </div>
                                        <input
                                            style="color: rgb(252, 89, 89);background-color: #fff;border: 1px solid rgb(252, 89, 89);font-size: 3px;padding: 1px 2px;"
                                            type="button" value="SQ">
                                        <span style="font-size: 6px;color: #999;">一直很喜欢肥陈,所以有人叫我肥鹏</span>
                                    </div>
                                </div>
                                <!-- 第三首列表歌  http://m701.music.126.net/20210619171636/1ea1d6d8374f9d3e22c8f4a70d05cb1f/jdymusic/obj/w5zDlMODwrDDiGjCn8Ky/2035473381/3b85/99e6/3a9c/5a8c8e51643157da4c658c54fe02af59.flac-->
                                <div class="videosong play" id="vs3" mp3="http://m701.music.126.net/20210619171636/1ea1d6d8374f9d3e22c8f4a70d05cb1f/jdymusic/obj/w5zDlMODwrDDiGjCn8Ky/2035473381/3b85/99e6/3a9c/5a8c8e51643157da4c658c54fe02af59.flac">
                                    <div class="videophoto" style="background: url(./images/hcy.jpg);background-size: cover;">
                                        <!-- <img class="leftphoto" src="http://p1.music.126.net/cfBlMI09TZ_6E01DqqISEA==/109951166098517615.jpg" alt=""> -->
                                        <span class="videospan" style="z-index: 5;">
                                            <i class="iconfont"> &#xe60f;
                                            </i>
                                        </span>
                                    </div>
                                    <div class="videodetail">
                                        <div class="singer">好想爱这个世界啊 <i>-</i> <span>华晨宇</span> </div>
                                        <input
                                            style="color: rgb(252, 89, 89);background-color: #fff;border: 1px solid rgb(252, 89, 89);font-size: 3px;padding: 1px 2px;"
                                            type="button" value="独家">
                                        <span style="font-size: 6px;color: #999;">每天一听防止抑郁</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="list" style="display: none;">
                    <div class="recommend">
                        <h6 style="color: #fff;font-size: 3px;">为你推荐</h6>
                        <div class="btns">
                            <input id="btneason" type="button" value="陈奕迅">
                            <input id="btnjay" type="button" value="周杰伦">
                            <input id="btnsweet" type="button" value="超甜">
                            <input id="btncon" type="button" value="粤语">
                            <input id="btnEn" type="button" value="英文">
                            <input id="btngoodmood" type="button" value="天天好心情">
                        </div>


                    </div>
                    <div class="musiclist">
                        <ul id="ul">
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687"><span> 兄妹 </span> <span id="secondspan"> 方大同/薛凯琪 </span> </li>   
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%A5%BD%E6%83%B3%E7%88%B1%E8%BF%99%E4%B8%AA%E4%B8%96%E7%95%8C%E5%95%8A(Live)%20-%20%E5%8D%8E%E6%99%A8%E5%AE%87%E3%80%81%E9%83%8E%E6%9C%97.mp3?sign=4832e181ab443726a29d9c4345cb2ad2&t=1621685737"><span> 好像爱这个世界 </span> <span id="secondspan"> 华晨宇/朗朗 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/16%E5%8F%B7%E7%88%B1%E4%BA%BA%20-%20%E5%AE%B9%E7%A5%96%E5%84%BF.mp3?sign=f5dcaa4b946c457149a545bc4adb6da4&t=1621685621"><span> 16号爱人 </span> <span id="secondspan"> 容祖儿 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E4%B8%80%E8%B7%AF%E5%90%91%E5%8C%97%20ballad%20-%20-%E6%9D%A8%E6%A5%9A%E9%AA%81.mp3?sign=49fe195f03b0b6f61d7e5790ad7db148&t=1621685552"><span> 一路向北 </span> <span id="secondspan"> 吉他版 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E4%BB%8A%E5%A4%A9%E5%8F%AA%E5%81%9A%E4%B8%80%E4%BB%B6%E4%BA%8B%20-%20%E9%99%88%E5%A5%95%E8%BF%85.mp3?sign=a6f6ea023962fa4a008c6b4f452cf1b3&t=1621685671"><span> 今天只做一件事 </span> <span id="secondspan"> 陈奕迅 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%8F%AF%E6%83%9C%E6%88%91%E6%98%AF%E6%B0%B4%E7%93%B6%E5%BA%A7%20-%20%E6%9D%A8%E5%8D%83%E5%AC%85.mp3?sign=4bb5bd225079ae2b1036e91597d39ab0&t=1621685704"><span> 可惜我是水瓶座 </span> <span id="secondspan"> 杨千嬅 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E7%BE%8E%E4%B8%BD%E4%B9%8B%E6%9C%80%20-%20%E4%BE%A7%E7%94%B0.mp3?sign=060e80805a8ca8269749690369f20049&t=1621685760"><span> 美丽之最 </span> <span id="secondspan"> 侧田 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E8%91%A1%E8%90%84%E6%88%90%E7%86%9F%E6%97%B6%20-%20%E9%99%88%E5%A5%95%E8%BF%85.mp3?sign=24de2597ae404bc157ea03a96d1acc2b&t=1621685776"><span> 葡萄成熟时 </span> <span id="secondspan"> 陈奕迅 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%A6%82%E6%9E%9C%E7%9A%84%E4%BA%8B%20-%20%E7%8E%8B%E6%A2%93%E9%92%B0%E3%80%81%E9%99%88%E6%96%87%E8%BE%89.mp3?sign=5277aa9c07749775d6fb6c754a3e052d&t=1621685868"><span> 如果的事 </span> <span id="secondspan"> 王梓钰、陈文辉 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%9B%9B%E5%AD%A3%E4%BA%88%E4%BD%A0%20-%20%E7%A8%8B%E5%93%8D.mp3?sign=95f968ee4e82fdfc5ff33f5a99bc405c&t=1621685721"><span> 四季予你 </span> <span id="secondspan"> 程响 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E9%98%B3%E5%85%89%E5%AE%85%E7%94%B7%20-%20%E5%91%A8%E6%9D%B0%E4%BC%A6.mp3?sign=6317c0e5f815be4ba83717417aa9f65f&t=1621685838"><span> 阳光宅男 </span> <span id="secondspan"> 周杰伦 </span> </li> 
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E9%81%87%E5%88%B0%20-%20%E6%96%B9%E9%9B%85%E8%B4%A4.mp3?sign=d7ace3bf4db07b82425d7c00cb143f11&t=1621685816"><span> 遇到 </span> <span id="secondspan"> 方雅贤 </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/On%20a%20Lonely%20Night%20-%20A%20Rocket%20To%20The%20Moon.mp3?sign=a99db20791a215108cc58fb46a86e39f&t=1621685634"><span> On a Lonely Night </span> <span id="secondspan"> A Rocket To The Moon </span> </li>  
                            <li  class="play" mp3="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/Treat%20You%20Better%20-%20Shawn%20Mendes.mp3?sign=a96593af2c5e643f021754e5a126e23e&t=1621685654"><span> Treat You Better </span> <span id="secondspan"> ShawnMendes </span> </li>  
                            <script id="songlist" type="text/html">
                                {{ each data.result.songs v }}
                                <li data-id="{{v.id}}" class="play"><span> {{v.name}} </span> <span id="secondspan"> {{v.artists[0].name}}  </span> </li>   
                                {{ /each }}
                            </script>
                        </ul>
                    </div>
                </div>
                <div class="shopcar" style="display: none;">3</div>
                <div class="my" style="display: none;">
                    <div class="photobtns">
                        <ul class="firstli"> 
                            <li class="filter-item" data-filter="all">全部</li>                       
                            <li class="filter-item" data-filter="before">以前</li>
                            <li class="filter-item" data-filter="recent">最近</li>
                            <li class="filter-item" data-filter="mofang">模仿</li>
                            <!-- <li class="filter-item" data-filter="hezhao">合照</li> -->
                            <li class="filter-item" data-filter="ugly">丑照</li>
                            <!-- <li>大三</li>                  -->
                        </ul>
                    </div>
                    <div class="photogallery">
                        <div class="row">
                            <!-- 以前的照片 -->
                            <div class="gallery-item before">      
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/g31.jpg?sign=e513b087f93efedf41cee410aac94fdb&t=1624243366" alt="before" introduce="我说这是我信么?极致美颜曝光">
                            </div>
                            <div class="gallery-item before">      
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/junxun.png?sign=652201b89fe967db06126600c6eedcc4&t=1624243479" alt="before" introduce="眉毛不够浓密,果然美颜不适合,长得一般,所以不怎么喜欢拍照">
                            </div>
                            <div class="gallery-item before">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u1summer.jpg?sign=bbbbb4adb870bdaff3597f4698ad22ab&t=1624244214" alt="before" introduce="大一暑假在广州，在路上看到漂亮的阿姨，露出狰狞的笑容被我朋友拍了下来">
                            </div>
                            <div class="gallery-item before">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u1.png?sign=b859f0ff1df45169825e616daca3d2a6&t=1624244379" alt="before" introduce="大一在阳台拍的">
                            </div>
                            <div class="gallery-item before">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u11.png?sign=66ab7ab8fee84a469d76924ea08b4d1b&t=1624244488" alt="before" introduce="10场比赛,7次替补,3次首发--后卫,场均3分1板2助攻1抢断">
                            </div>
                            <!-- 最近 -->
                            <div class="gallery-item recent">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u3.jpg?sign=99f9d70b36b037eeec517bd4e3eb9801&t=1624245221" alt="recent" introduce="灯光选的好,丑男变白白">
                            </div>
                            <div class="gallery-item recent">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u31.jpg?sign=715df462059d58604693ca45014921a3&t=1624245336" alt="recent" introduce="角度选的好,死亡视角也不怕,嘻嘻嘻">
                            </div>
                            <div class="gallery-item recent">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u312.jpg?sign=5cae58bbeef0dc1883b0d29ffdf0d455&t=1624245408" alt="recent" introduce="角度灯光选的好,眼睛眨一眨">
                            </div>
                            <div class="gallery-item recent">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u32.jpg?sign=9872d41444222c8327e69c9c92f317b4&t=1624245550" alt="recent" introduce="目光呆滞">
                            </div>
                            <div class="gallery-item recent">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/u36.jpg?sign=0ab676cf1fdf1fe2cf6d2285ec346458&t=1624245601" alt="recent" introduce="为什么你的照片那么多露额头哈哈哈,学你">
                            </div>
                            
                            <div class="gallery-item recent">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/mf2.jpg?sign=0f82c3a15a5f862ea47a453c0d464536&t=1624245726" alt="recent" introduce="发际线上移,希望以后不要秃顶555">
                            </div>
                            <div class="gallery-item mofang">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/mf3.jpg?sign=81d5bac939bfdb58c917c62086dc123d&t=1624245919" alt="mofang" introduce="托腮">
                            </div>
                            <div class="gallery-item mofang">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/mf4.jpg?sign=3462374cf92bd3049c7ad0d504e122b1&t=1624245952" alt="mofang" introduce="原相机搭配好灯光简直无敌,再托腮">
                            </div>
                            <div class="gallery-item mofang">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/mf5.jpg?sign=2f7e029358d14bd5788fbe06a615009c&t=1624246020" alt="mofang" introduce="卧槽辣眼睛辣眼睛,照片拍好,现在看为什么我拍照老爱歪头???">
                            </div>
                            <div class="gallery-item mofang">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/mf6.jpg?sign=9692f01e5b998f860dc798ac09ea34ef&t=1624246086" alt="mofang" introduce="没有长头发,我也只能在托了,皮肤不好,要是我脸能有手这么白就好咯">
                            </div>
                            <!-- <div class="gallery-item hezhao">
                                <img src="./images/4.jpg" alt="hezhao" introduce="哈哈哈3">
                            </div> -->
                            <div class="gallery-item ugly">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/ugly1.jpg?sign=2d249b301b6b13c79d8c05a415e5c0d8&t=1624246325" alt="ugly" introduce="啧啧">
                            </div>
                            <div class="gallery-item ugly">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/mooning.jpg?sign=2445532788a6b063e1d198fcd0e768c1&t=1624246607" alt="ugly" introduce="今早拍的,为什么脸这么胖了。。我想我要剪胡子了">
                            </div>
                            <div class="gallery-item ugly">
                                <img src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/ugly2.jpg?sign=d170406f3fb76b74faa84dda3a43bbb6&t=1624246356" alt="ugly" introduce="灯光很重要,我也要保养皮肤了哈哈">
                            </div>

                            <div class="gallery-item"></div>
                            <div class="gallery-item"></div>
                          
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部控件 -->
            <div class="musicbottom" id="">
                <!-- 播放控制器 -->
                <div class="musictab">
                    <div class="audio_con">
                        <audio controls autoplay="autoplay" loop class="myaudio"
                            src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687"></audio>
                    </div>
                </div>
                <!-- 底部tab栏 -->
                <div class="musiccon">
                    <div class="wrap">
                        <ul>
                            <li class="tabactive">
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe649;
                                    </i>
                                </span>
                                <h6>首页</h6>
                            </li>
                            <li>
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe76a;
                                    </i>
                                </span>
                                <h6>列表</h6>
                            </li>
                            <li>
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe674;
                                    </i>
                                </span>
                                <h6>购物车</h6>
                            </li>
                            <li>
                                <span>
                                    <i id="iconfont" class="iconfont"> &#xe607;
                                    </i>
                                </span>
                                <h6>我的</h6>
                            </li>

                        </ul>
                    </div>
                    <!-- <div class="wrap">
                        <div class="item">
                            <span>
                                <i class="iconfont"> &#xe76a;
                                </i>
                            </span>
                            <h6>列表</h6>
                        </div>
                    </div>
                    <div class="wrap">
                        <div class="item">
                            <span>
                                <i class="iconfont"> &#xe674;
                                </i>
                            </span>
                            <h6>购物车</h6>
                        </div>
                    </div>
                    <div class="wrap">
                        <div class="item">
                            <span>
                                <i class="iconfont"> &#xe607;
                                </i>
                            </span>
                            <h6>我的</h6>
                        </div>
                    </div> -->

                </div>
            </div>


        </div>

        <div class="photoshow">
            <img id="btnclose" src="./images/btnclose.png" alt="">
            <div class="picshow">
                <img src="./images/1.jpg" alt="">
                
            </div>
            <p>213</p>
        </div>

    </div>

</body>

</html>